<script lang="ts" setup>
import { initPageVO, type PageDTO, type PageVO, type ResultType } from '@/type/type'
import { type Develop, getDevelopPage } from '@/request/api/develop'
import { useScrollStore } from '@/stores/scroll'

const scrollStore = useScrollStore()

const page = reactive<PageDTO>({
  current: 1,
  size: 10,
  param: {
    branch: 'master'
  }
})

const vo = ref<PageVO<Develop>>(initPageVO())
const getList = () => {
  getDevelopPage(page).then((res: ResultType<PageVO<Develop>>) => {
    vo.value.list.push(...res.data.list)
    vo.value.isEmpty = res.data.isEmpty
  })
}

watch(
  () => page.current,
  () => {
    getList()
  },
  {
    deep: true
  }
)

onMounted(() => {
  getList()
})
</script>

<template>
  <TopImageTemplate>
    <template #title>
      <el-container class="items-center gap-2" direction="vertical">
        <span class="text-3xl ellipsis-1 flowing-text">开发历程</span>
        <span class="ellipsis-1">路漫漫其修远兮，吾将上下而求索。</span>
      </el-container>
    </template>
    <el-container class="inner-box" direction="vertical">
      <DevelopBox :data="vo.list" :show-plane="true" />
      <a
        v-if="!vo.isEmpty"
        class="w-fit mx-auto my-5 rounded-full border-2 use-hover-bg use-transitions-colors-short"
        @click="page.current++"
      >
        <span class="flex py-2 px-5">加载更多</span>
      </a>
    </el-container>
  </TopImageTemplate>
</template>

<style lang="scss" scoped></style>
